<!--
  * 部门 表单 树形下拉框
  *
  * @Author:    zhoujk
  * @Date:      2025-01-25 17:04
-->
<template>
  <a-tree-select
    :value="props.value"
    :treeData="treeData"
    :fieldNames="{ label: 'name', key: 'id', value: 'id' }"
    show-search
    :style="`width: ${width}`"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="请选择部门"
    allow-clear
    tree-default-expand-all
    treeNodeFilterProp="name"
    @change="treeSelectChange"
  />
</template>
<script setup>
  import { onMounted, reactive, ref } from 'vue'
  import { departApi } from '/src/api/system/b-operation/depart-api'

  const props = defineProps({
    value: String,
    width: {
      type: String,
      default: '100%',
    },
  })

  let treeData = ref([])
  let param = reactive({
    showManagerFlag: false,
  })

  async function queryTree() {
    let res = await departApi.tree(param)
    treeData.value = res.data
  }

  onMounted(queryTree)

  const emit = defineEmits(['update:value'])
  function treeSelectChange(e) {
    emit('update:value', e)
  }

  defineExpose({
    queryTree,
  })
</script>
